<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
		<div id="root">
			<!-- <div v-on:click="handleClick">{{content}}</div> -->
			<!-- 等于 -->
			
			
		</div>

	<!-- <script type="text/javascript">
		var dom=document.getElementById('app');
		dom.innerHTML='hello world'
	</script> -->
	<script type="text/javascript">



		// 生命周期函数就是vue实例在某一个时间点会自动执行的函数
		



		var app=new Vue({
			el:'#root',
			template:"<div>{{test}}</div>",
			data:{
				test:"hello world"
			},
			beforeCreate:function() {
				console.log("beforeCreate")
			},
			created() {
				console.log("created");
			},
			beforeMount() {
				console.log(this.$el);
				console.log("beforeMount");
			},
			mounted() {
				console.log(this.$el);
				console.log("mounted");
			},


			// when vm.$destroy() is called
			beforeDestroy() {
				console.log("beforeDestroy");
			},
			destroyed() {
				console.log("destroyed");
			},	

			// when data changes
			beforeUpdate() {
				console.log("beforeUpdate");
			},
			updated() {
				console.log("updated");
			},


		})
		// setTimeout(function(){
		// 	app.$data.content='bye'
		// },2000)
	</script>
	</body>
</html>
